<template>
  <div>
    <CustomTable 
      class="customTable"
      rowKey="id"
      title="任务日志" 
      :dataSource="dataSource" 
      :columns="columns" 
      :loading="loading"
      :downloadTitle="downloadTitle"
      @change="onChange"
      :pagination="{showTotal:() => `共 ${total} 条数据`,total:total, pageSize: pageSize,showLessItems: true, showSizeChanger:true,pageSizeOptions:['10', '20', '50', '100']}"
    >
      <div style="margin-bottom: 20px;"> 
        <a-input-search v-model="keyword" placeholder="请输入计划id、账户名" @search="getData" style="width: 200px;margin-right: 20px;" />
        <!-- <a-date-picker @change="dateChange" :defaultValue="moment(date)" :disabled-date="disabledDate" /> -->
        <a-range-picker
          :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                    '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
          :defaultValue="[moment(start_date), moment(end_date)]"
          :disabled-date="disabledDate" @change="formDateChange" 
          style="width: 260px;"
        />
      </div>
      <div slot="tip" slot-scope="{record}" >
        <a-tooltip placement="topLeft">
          <template slot="title">
            {{record.tip}}
          </template>
          <span class="line1" style="width: 320px;cursor: pointer;">{{record.tip}}</span>
        </a-tooltip>
      </div>
      <div slot="name" slot-scope="{record}" >
        {{ record.name }}
      </div>
      <div slot="account" slot-scope="{record}" >
        {{ record.account }}
      </div>
    </CustomTable>
  </div>
</template>

<script>
import { taskLog } from '@/api/dianshang/dianshang'
import CustomTable from '@/components/table/CustomTable'
import moment from 'moment'

export default {
  data() {
    return {
      moment,
      page: 1,
      dataSource: [],
      dataTotal:[],
      loading: false,
      downloadTitle:'日志数据',
      pageSize: 10,
      date: moment().format("YYYY-MM-DD"),
      total:0,
      keyword: '',
      start_date: moment().add('days').format("YYYY-MM-DD"),
      end_date: moment().add('days').format("YYYY-MM-DD"),
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          width: 80,
        },
        {
          title: '计划id',
          dataIndex: 'campaign_id',
          width: 100,
        },
        {
          title: '账户',
          width: 120,
          dataIndex: 'account',
          scopedSlots: {
            customRender: 'account'
          },
        },
        {
          title: '任务信息',
          width: 350,
          dataIndex: 'tip',
          scopedSlots: {
            customRender: 'tip'
          },
        },
        {
          title: '策略名',
          width: 160,
          dataIndex: 'name',
          scopedSlots: {
            customRender: 'name'
          },
        },
        {
          title: '创建时间',
          width: 180,
          dataIndex: 'create_time',
        },
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {
        page: this.page,
        pagesize: this.pageSize,
      }
      // if (this.date != "") {
      //   params['date'] = this.date
      // }
      if (this.start_date != '') {
        params.start_date = this.start_date
        params.end_date = this.end_date
      }
      if (this.keyword != '') {
        params['keyword'] = this.keyword
      }
      this.loading = true
      taskLog(params).then((res) => {
        this.loading = false
        if (res.errcode == 0) {
          this.dataSource = res.data.list
          this.dataTotal = res.data.list
          this.total = res.data.total
        }
      }).catch(() => {
        this.loading = false
      });
    },
    onChange(pagination) {
      console.log(pagination);
      this.page = pagination.current
      this.pageSize = pagination.pageSize
      this.getData()
    },
    onKeywordSearch(e) {
      const data = this.dataTotal.filter(o => o.campaign_id.toString().indexOf(e) >= 0 || o.account.indexOf(e) >= 0)
      this.dataSource = data
    },
    formDateChange(e) {
      // 时间选择
      if (e.length == 0) {
        this.start_date = ''
        this.end_date = ''
      } else {
        this.start_date = e[0].format("YYYY-MM-DD")
        this.end_date = e[1].format("YYYY-MM-DD")
      }
      this.getData()
    },
    dateChange(e) {
      // 时间选择
      if (e) {
        this.date = e.format("YYYY-MM-DD")
      } else {
        this.date = ""
      }
      this.getData()
    },
    disabledDate(current){
      return current && ( current < moment().endOf('day').add(-100, 'days') || current > moment().endOf('day').add('days')) ;
    },
  },
  components:{CustomTable}
}
</script>

<style lang="less" scoped>

</style>
<style lang="less">
.line1{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>